<template>
  <div class="cinema">
    <!-- 影院 -->
    <div class="dropdown">
      <van-dropdown-menu>
        <van-dropdown-item
          v-model="value1"
          :options="option1"
          ref="dropdownitem"
          class="option1"
        >
          <!-- 商区 -->
          <van-tabs v-model="active">
            <van-tab title="商区" v-if="district">
              <van-tree-select
                :items="districtitem"
                :active-id.sync="activeId"
                :main-active-index.sync="activeIndex"
                @click-nav="getDistrictAll"
                @click-item="getDistrict"
              />
            </van-tab>
            <!-- 地铁站 -->
            <van-tab title="地铁站">
              <van-tree-select
                :items="subwayitem"
                :active-id.sync="activeId"
                :main-active-index.sync="activeIndex"
                @click-nav="getDistrictAll"
                @click-item="getArea"
              />
            </van-tab>
          </van-tabs>
        </van-dropdown-item>

        <!-- 电影院列表 -->
        <div v-if="cinemalist" class="cinema-list">
          <ul class="list">
            <router-link
              tag="li"
              :to="`/cinema/${cinema.cinemaId}`"
              v-for="cinema in cinemalist"
              :key="cinema.cinemaId"
            >
              <!-- 名字 -->
              <h4>
                {{ cinema.title }}
                <span>
                  <b>{{ cinema.price.n }}</b
                  ><b class="q"> {{ cinema.price.q }}</b>
                </span>
              </h4>
              <!-- 地址 -->
              <p class="loc">{{ cinema.location }}</p>
              <!-- 特色 -->
              <div class="feature">
                <div
                  class="tit"
                  v-for="(item, index) in cinema.services"
                  :key="cinema.cinemaId + cinema.title + index"
                >
                  {{ item.text }}
                </div>
              </div>
              <!-- for优先级更高，所以每次都会把if循环一次，所以不能一起使用 -->
              <div v-if="cinema.discount">
                <p
                  class="discount"
                  v-for="dis in cinema.discount"
                  :key="dis + cinema.cinemaId + cinema.title"
                >
                  <img :src="dis.card" alt="" />
                  {{ dis.text }}
                </p>
              </div>
            </router-link>
          </ul>
        </div>

        <!-- 选项 -->
        <across-town v-if="screenShow"></across-town>

        <!-- 品牌 -->
        <van-dropdown-item
          v-model="value2"
          :options="branditem"
          @change="getbrand"
        />
      </van-dropdown-menu>
    </div>
  </div>
</template>

<script>
import AcrossTown from "../components/AcrossTown.vue";
export default {
  components: { AcrossTown },
  props: {
    city: {
      type: Object,
      default: () => {
        return null;
      },
    },
    cinemalist: {
      type: Array,
      default: () => {
        return [];
      },
    },
    district: {
      type: Array,
      default: () => {
        return [];
      },
    },
    districtitem: {
      // 行政区
      type: Array,
      default: () => {
        return [];
      },
    },
    subwayitem: {
      // 地铁
      type: Array,
      default: () => {
        return [];
      },
    },
    branditem: {
      // 品牌
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      activeId: 1, // 选项卡
      activeIndex: 0, // 选项卡
      active: 0, // 选项卡

      screenShow: false, // 筛选
      // cinemaList: null,
      // 影院请求接口参数
      dayTime: null, // 存放时间
      brand: -1, // 品牌
      service: -1, // 影院服务特色
      lat: -1, // 经度
      lng: -1, // 纬度

      value1: 0,
      value2: -1,
      value3: "b",
      option1: [{ text: "价格王国", value: 0 }],
      option2: [
        { text: "默认排序", value: "a" },
        { text: "好评排序", value: "b" },
        { text: "销量排序", value: "c" },
      ],
    };
  },
  methods: {
    // 请求时间
    getTime() {
      var time = new Date();
      var y = time.getFullYear();
      var m = (time.getMonth() + 1).toString().padStart(2, "0");
      var d = time.getDate().toString().padStart(2, "0");
      this.dayTime = `${y}-${m}-${d}`;
      // console.log(this.dayTime);
      // console.log(this.city.id);
    },
    getDistrictAll(index) {
      console.log(index);
      if (index == 0) {
        this.option1[0].text = "全部";
        this.$refs.dropdownitem.toggle(false);
        this.$emit("business", "all");
      }
    },
    // 请求渲染条件，行政区
    getDistrict(event) {
      console.log(event);
      // console.log(text);
      this.option1[0].text = event.text;
      // 点击之后会把列表回收上去
      this.$refs.dropdownitem.toggle(false);
      this.$emit("cityId", ["districtId", event.id]);
    },
    // 请求渲染条件，地铁
    getArea(event) {
      console.log(event);
      // console.log(text);
      this.option1[0].text = event.text;
      // 点击之后会把列表回收上去
      this.$refs.dropdownitem.toggle(false);
      this.$emit("cityId", ["stationId", event.id]);
    },

    // 品牌触发
    getbrand(event) {
      console.log(event);
      this.$emit("cityId", ["brandId", event]);
    },
  },

  computed: {
    districtItem: () => {
      var items = [];
      var activeId = ""; // 右边索引
      var text = ""; // 左边列表
      var children = []; // 右边列表
      // 行政区 分类
      this.district.forEach((item) => {
        activeId = item.id;
        text = item.name;
        // 如果是全部就不要右边
        if (item.id == -1) {
          children = [];
        } else {
          // 然后把各个县区渲染出来
          if (item.subItems) {
            item.subItems.forEach((ele) => {
              children.push({
                text: ele.name,
                id: ele.id,
              });
            });
            items.push({
              activeId,
              text,
              children,
            });
          }
        }
      });

      return items;
    },
  },

  created() {
    this.getTime();
  },
  mounted() {},
};
</script>


<style lang="scss" scoped>
.cinema {
  .dropdown {
    border-top: 2px solid #eeeeee;
  }
  // 电影院列表
  .cinema-list {
    border-top: 2px solid #eeeeee;
    .list {
      margin-left: 15px;

      li {
        padding: 20px 0 15px;
        border-bottom: 2px solid #efefef;
        // 名字
        h4 {
          margin-bottom: 10px;
          font-size: 16px;
          span {
            margin-left: 8px;
            color: #f03d37;

            b {
              font-size: 18px;
              &.q {
                font-size: 12px;
              }
            }
          }
        }
        // 地址
        .loc {
          margin-bottom: 5px;
          font-size: 13px;
          color: #666;
        }
        // 特色
        .feature {
          margin-bottom: 10px;
          display: flex;
          // 标签
          .tit {
            font-size: 12px;
            line-height: 12px;
            padding: 2px 3px;
            margin-left: 5px;
            color: #589daf;
            border: 1px solid #589daf;
            border-radius: 2px;
          }
        }
        // 开卡
        .discount {
          display: flex;
          align-items: center;
          color: #999;
          font-size: 12px;
          img {
            width: 15px;
            height: 14px;
          }
        }
      }
    }
  }
}
</style>

<style  >
.option1 .van-cell {
  display: none !important;
}

.cinema .van-tabs__content {
  height: auto !important;
}

.van-dropdown-menu__bar {
  box-shadow: none !important;
}
</style>